import { Select } from 'antd'
import React, { useMemo } from 'react'

const { Option } = Select

/* 
import CustomSelect from '@/components/antd-comp/select/CustomSelect'

<CustomSelect
  defaultValue="lucy"
  style={{ width: 120 }}
  onChange={() => {}}
  options={[
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'Yiminghe', label: 'yiminghe' },
    { value: 'disabled', label: 'Disabled', disabled: true }
  ]}
></CustomSelect>
*/

// 定义封装后组件的属性类型
interface CustomSelectProps extends Omit<React.ComponentProps<typeof Select>, 'children'> {
  options: { [key: string]: any }[]
  defaultValue?: any
  onChange?: (value: any) => void
  fieldNames?: { label: string; value: string }
}

const CustomSelect: React.FC<CustomSelectProps> = ({ options, defaultValue, onChange, fieldNames, ...props }) => {
  const { label: labelKey = 'label', value: valueKey = 'value' } = fieldNames || {}
  const renderedOptions = useMemo(
    () =>
      options.map(item => (
        <Option key={item[valueKey]} value={item[valueKey]}>
          {item[labelKey]}
        </Option>
      )),
    [options, labelKey, valueKey]
  )

  return (
    <Select defaultValue={defaultValue} onChange={onChange} {...props}>
      {renderedOptions}
    </Select>
  )
}

export default CustomSelect
